<template>
  <div>
      <el-tooltip :open-delay="1000" effect="dark"
                :content="$t('custom.dataInspector')"
                placement="top">
        <el-button @click="openDialog"
          :disabled='disabled'
          class="cuifont icon_data_inspactor"
          style="fontSize:14px;padding:7px;"></el-button>
      </el-tooltip>
    <PreWiewData ref="preview-data"
                 :disabled='disabled'
                 :datasetId='datasetId'
                 :datasetLayerId='datasetLayerId'
                 :gadgetId='gadgetId'
                 :filterJson='filterJson' />
  </div>
</template>
<script>
import PreWiewData from '@/components/preview-data/index'
import mixinTypeViewModule from '@/mixins/script-type-view-module'

export default {
  mixins: [mixinTypeViewModule],
  components: { PreWiewData },
  props: {
    showJson: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      disabled: false,
      datasetId: null,
      gadgetId: null,
      filterJson: {},
      datasetLayerId: null
    }
  },
  methods: {
    openDialog () {
      let radioSelectScriptItem = this.showJson.find(e => e.type === 'radio-select') || {}
      let type = this.dataForm[radioSelectScriptItem.text][radioSelectScriptItem.radioValue]
      let id = this.dataForm[radioSelectScriptItem.text][radioSelectScriptItem.selectValue]
      let datasetLayerId = this.dataForm[radioSelectScriptItem.text]['datasetLayerId'] || null
      this.datasetId = null
      this.gadgetId = null
      this.datasetLayerId = null
      if (type === 'dataset') {
        this.datasetId = id
        if (datasetLayerId) this.datasetLayerId = datasetLayerId
      } else {
        this.gadgetId = id
      }
      let filterScriptItem = this.showJson.find(e => e.type === 'filter') || {}
      this.filterJson = this.dataForm[filterScriptItem.text]
      this.$nextTick(() => {
        this.$refs['preview-data'].init()
      })
    }
  }
}
</script>
